<template>
  <div class="box" :class="{ isAnimate: isAnimate }">{{ 1 + 1 }} : {{ a }} + {{ b }} = {{ c }}</div>
  <div v-if="isAnimate">操作</div>
  {{ form.a }} + {{ form.b }} = {{ form.c }}
  <div>
    <button @click="add">添加</button>
  </div>
</template>
<script>
import { ref, computed, markRaw } from 'vue'
export default {
  data() {
    return {
      a: 1,
      b: 2,
      isAnimate: false,
      form: {}
    }
  },
  computed: {
    c() {
      return this.a + this.b
    }
  },
  methods: {
    add() {
      console.log(`helloworld`)
      this.a++
      this.isAnimate = true
    }
  },
  mounted() {
    console.log(`helloworld`)
    /*
    A -> B1,B2,B3
    B -> [B1,B2],B3
    选择什么构建什么
    */
    let form = {
      a: ref(1),
      b: ref(2),
      c: ref(0)
    }

    form.c = computed(() => {
      return form.a.value + form.b.value
    })

    setInterval((res) => {
      form.a.value++
    }, 1e3)
    //数据用一种，渲染用一种
    //48 * 60 = 2880
    this.form = form
  }
}
</script>
<style type="text/css" lang="scss">
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  &.isAnimate {
    border: 5px solid #000;
    transform: translatex(100px) rotate(30deg) translatex(100px);
    transition: all 0.5s ease;
  }
}
</style>
